<template>
	<view
	class="yb-badge yb-flex"
	:id="customIdSync"
	:class="customClassSync"
	:style="rootStyle">
		<slot></slot>
		<view class="dot yb-flex yb-justify-center yb-align-center" v-if="!hidden" :style="{
			'background-color': color,
			'border-radius': Util.pixelunit(size),
			'width': dot ? '20rpx' : '',
			'height': dot ? '20rpx' : '',
			'padding-left': dot ? '' : '20rpx',
			'padding-right': dot ? '' : '20rpx'
		}">
			<slot name="dot">
				<text v-if="!dot" :style="{
					'font-size': Util.pixelunit(size),
					'color': '#fff'
				}">{{content}}</text>
			</slot>
		</view>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			value: {
				type: [Number, String],
				default: ''
			},
			dot: {
				type: Boolean,
				default: false
			},
			min: {
				type: [Number,String],
				default: 1
			},
			max: {
				type: [Number,String],
				default: 99
			},
			color: {
				type: String,
				default: '#EE0A24'
			},
			size: {
				type: String,
				default: '24rpx'
			},
			
		},
		computed: {
			Util () {
				return Util
			},
			rootStyle () {
				return this.filterStyle(
					{
						'padding-left': this.padding + 'px',
						'padding-right': this.padding + 'px',
						'padding-top': this.padding + 'px',
						'padding-bottom': this.padding + 'px'
					}
				) + this.customStyleSync
			},
			padding () {
				return Util.unitpixel( this.dot ? 20 : this.size) / 2
			},
			content () {
				return Util.typeof(this.value) == 'Number' && this.value > this.max ? this.max + '+' : this.value
			},
			hidden () {
				return Util.typeof(this.value) == 'Number' && this.value < this.min && !this.dot ? true : false
			}
		}
	}
</script>

<style scoped>
	.yb-badge {
		position: relative;
	}
	.yb-badge .dot {
		position: absolute;
		right: 0;
		top: 0;
	}
</style>